<template>
	<view @click="gotoList()" class="round-4 mx-32 my-24" style="border:1rpx solid #f1f1f1; background-color: white;">
		<view class="flex flex-between pa-24" style="position: relative;border-bottom: 1px solid #f5f5f5;line-height: 2;">

			<view class="flex flex-center">
				<tm-icon :name="icon" color="#5a94f6" class="mr-15" :font-size="40"></tm-icon>
				<tm-text :font-size="28" :label="`${code}`" :color="titleColor" :fontSize="32"></tm-text>
			</view>

			<view class="round-bl-10 round-tr-4 py-6 px-20" :style="{'background-color':tagColor}" style="top:0;right:0;position: absolute; font-size: 28rpx; color: white;">{{label}}</view>
		</view>

		<view class="flex pa-24">
			<view class="" style="width:100%">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		data:{
			type:Object,
			require:true
		},
		url:{
			type:String
		},
		tagColor:{
			type:String,
			default:'#23C343'  // #5ae433
		},
		label:{
			type:String,
			default:'已完成'
		},
		code:{
			type:String
		},
		icon:{
			type:String,
			default:'tmicon-ios-filing'
		},
		titleColor:{
			type:String,
			default:'#333'
		}
	})

	const gotoList = () => {
		uni.navigateTo({
			url:props.url
		})
	}
</script>

<style>

</style>
